<template>
	<view class="index_container">
		<view class="mbti_title">
			MBTI测试
		</view>
		<!-- 答题提示 -->
		<view class="text_tips">
			<p class="tip" v-for="(tip, index) in displayedTips" :key="index">{{ tip }}</p>
		</view>
		<!-- 下一步按钮 -->
		<view v-if="showNextFlag" class="next_button" @click="nextStep">{{ nextText }}</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onShow } from '@dcloudio/uni-app';

let topics = ref([]);
let tips = ref([]); 
let displayedTips = ref([]); // 提示文本列表
let currentTipIndex = ref(0); 
let charIndex = ref(0);
let showNextFlag = ref(false);
let userOpenId = ref("");
let nextText = ref("支付0.01开启答题") // 按钮文本

onMounted(()=>{
	// 逐行逐字显示提示
	showTipsText();
	// 获取用户openID
	getUserInfo();
})

onShow(()=>{
	checkUserPayStatus(userOpenId.value)
})

// 登录
function getUserInfo(){
	uni.login({
	    provider: 'weixin',
	    success: (res) => {
	        if (res.code) {
	            // 登录成功，返回的 code
	            // console.log('登录成功，code:', res.code);
	            // 将code传入后端，获取用户的openID
				getUserOpenId(res.code);
	        } else {
				uni.showToast({
					title: '登录授权失败!'
				});
	            console.log('登录失败！' + res.errMsg);
	        }
	    },
	    fail: (err) => {
	        console.error(err);
	    }
	});
}

// 获取用户openID
async function getUserOpenId(code){
	const res = await uni.$http.get(`/common/getOpenId/${code}`);
	userOpenId.value = res.data.openid;
	// 判断该用户是否有支付但是未测试的情况，如果有则直接进行测试，无需再次支付
	checkUserPayStatus(res.data.openid);
	// 存入本地存储
	uni.setStorageSync("openId", res.data.openid);
}

async function checkUserPayStatus(openId){
	if(openId == ""){return 1};
	const res = await uni.$http.get(`/payInfos/checkUserPayStatus/${openId}`);
	if(res.data.code == 0){
		nextText.value = "支付0.01开启答题";
		// console.log(res.data.msg);
		return 1;
	}
	// 检测到用户已有支付但未测试的订单
	nextText.value = "立即测试";
}
	
// 支付
async function nextStep(){
	await checkUserPayStatus(userOpenId.value); // 检查用户是否已支付-兼容页面刷新问题
	// 检查是否需要支付
	if(nextText.value == "立即测试"){
		uni.navigateTo({
			url:"/pages/answer/answer"
		})
		return 1;
	}
	const res = await uni.$http.get(`/pay/preOrderCreate?openId=${userOpenId.value}`);
	// 唤起支付
	payActive(res.data.data);
}

function payActive(payParam){
	uni.requestPayment({
	    "nonceStr": payParam.wxNonceStr, // 随机字符串
	    "package": payParam.wxPackage,        // 预支付订单号
	    "signType":payParam.wxSignType,     // 签名类型
	    "timeStamp": payParam.wxTimeStamp,  // 时间戳
	    "paySign": payParam.wxPaySign, // 签名，这里用的 RSA 签名
	    success(res) {
			// 支付成功处，页面跳转，创建支付记录信息
			console.log("支付成功!");
			uni.showToast({
				icon:"none",
				title: '支付成功，即将跳转'
			});
			
			// 跳转
			setTimeout(()=>{
				uni.navigateTo({
					url:"/pages/answer/answer"
				})
			}, 1500)
		},
	    fail(e) {
			// 失败回调
			console.log("支付失败");
			uni.showToast({
				icon:"none",
				title: '支付状态错误!'
			});
			// console.log(e);
		}
	})
}

// 显示提示文本
function showTipsText(){
	tips.value = [
		"这些问题都没有正确的答案。",
		"快速回答问题，不要过度分析。",
		"有些似乎措辞不好，选择感觉最好的。",
		"以 “真实情况”来回答问题，而不是 “你希望被别人看到的方式”"
	];
	displayNextChar();
}

// 逐行显示函数
function displayNextChar() {
	// 设置“下一步”按钮的延后显示
	setTimeout(()=>{
		showNextFlag.value = true;
	}, 10000)
	if (currentTipIndex.value < tips.value.length) {
		if (charIndex.value < tips.value[currentTipIndex.value].length) {
			displayedTips.value[currentTipIndex.value] = (displayedTips.value[currentTipIndex.value] || "") + tips.value[currentTipIndex.value][charIndex.value];
			charIndex.value++;
			setTimeout(displayNextChar, 100); // 调整速度
		} else {
			currentTipIndex.value++;
			charIndex.value = 0;
			displayedTips.value.push(""); // 添加新行
			setTimeout(displayNextChar, 500); // 下一行的间隔
		}
	}
}

</script>

<style scoped>
.index_container{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	padding: 0px 30px;
}

.mbti_title{
	text-align: center;
	padding: 10px 0px;
	font-size: 25px;
	margin-top: 25px;
}

.tip{
	padding: 10px 0px;
	text-align: center;
	line-height: 30px;
	margin-top: 10px;
}

.next_button{
	text-align: center;
	border: solid #665e5e 1px;
	width: max-content;
	margin: 0 auto;
	padding: 10px 23px;
	border-radius: 10px;
	background-color: #d36767;
	color: white;
}
</style>
